import React from 'react';

type NavKey = 'text' | 'pest' | 'plant' | 'records';

type LayoutProps = {
  active: NavKey;
  onChange: (key: NavKey) => void;
  children: React.ReactNode;
};

export const Layout: React.FC<LayoutProps> = ({ active, onChange, children }) => {
  return (
    <div className="layout">
      <aside className="sidebar">
        <div className="brand">
          <span className="brand-logo">🌾</span>
          <div className="brand-text">
            <div className="brand-title">AI 农业问答</div>
            <div className="brand-sub">Agri Q&A SaaS</div>
          </div>
        </div>
        <nav className="nav">
          <button className={active === 'text' ? 'nav-item active' : 'nav-item'} onClick={() => onChange('text')}>
            <span className="nav-ico">💬</span>
            <span>文字问答</span>
          </button>
          <button className={active === 'pest' ? 'nav-item active' : 'nav-item'} onClick={() => onChange('pest')}>
            <span className="nav-ico">🪲</span>
            <span>病虫害识别</span>
          </button>
          <button className={active === 'plant' ? 'nav-item active' : 'nav-item'} onClick={() => onChange('plant')}>
            <span className="nav-ico">🌿</span>
            <span>植物识别</span>
          </button>
          <div className="nav-sep" />
          <button className={active === 'records' ? 'nav-item active' : 'nav-item'} onClick={() => onChange('records')}>
            <span className="nav-ico">📚</span>
            <span>识别记录</span>
          </button>
        </nav>
      </aside>
      <div className="main">
        <header className="topbar">
          <div className="topbar-left">
            <div className="top-title">{titleOf(active)}</div>
          </div>
          <div className="topbar-right">
            <a className="top-link" href="#" title="帮助">帮助</a>
          </div>
        </header>
        <div className="container">
          {children}
        </div>
      </div>
    </div>
  );
};

function titleOf(active: NavKey): string {
  switch (active) {
    case 'text':
      return '文字问答';
    case 'pest':
      return '图片病虫害识别';
    case 'plant':
      return '植物识别';
    case 'records':
      return '识别记录';
    default:
      return '';
  }
}

